<template>
  <div>
    <!-- <div>
      <el-breadcrumb separator-class="el-icon-arrow-right" style='marginBottom:10px'>
        <el-breadcrumb-item
          ><i class="el-icon-location-outline" />
          &nbsp;&nbsp;&nbsp;当前位置</el-breadcrumb-item
        >
        <el-breadcrumb-item  @click.native="changePage" style="cursor:pointer"
          >入职/新增</el-breadcrumb-item
        >
        <el-breadcrumb-item
          >批量上传员工</el-breadcrumb-item
        > 
      </el-breadcrumb>
    </div> -->
  <div class="infomation">
    <el-row>
      <el-col :span="24">
        <div class="infomation-mian">
          <div class="setTop">
            <el-button @click="dialogVisible = true">设置离职</el-button>
          </div>
          <ul class="infomation-mian-top">
            <li class="infomation-mian-img">
              <img class="img-avative" src="@/assets/home/ceshi1.jpg" />
              <img class="img-icon" src="@/assets/home/rz-md_zs.png" />
            </li>
            <li class="infomation-mian-name">张三</li>
          </ul>
          <div class="infomation-text">
            <span>产品部</span>
            <span>在海富德301天</span>
          </div>
          <ul class="infomation-flooter">
            <el-tabs
              tab-position="left"
              v-model="activeName"
              @tab-click="handleClick"
            >
              <el-tab-pane name="basic" label="基本信息">
                <datatop :activeName="activeZhName" v-if="activeZhName" />
                <div class="allForm">
                  <el-form
                    :model="basicForm"
                    :rules="basicRules"
                    ref="basicForm"
                    label-width="100px"
                    class="demo-Form"
                    hide-required-asterisk
                  >
                    <el-form-item label="姓名" prop="name">
                      <el-input v-model="basicForm.name" :disabled='isForbiddenInput' placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="phone">
                      <el-input v-model="basicForm.phone" :disabled='isForbiddenInput' placeholder="请输入手机号码"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="mailbox">
                      <el-input v-model="basicForm.mailbox" :disabled='isForbiddenInput' placeholder="请输入邮箱"></el-input>
                    </el-form-item>
                    <el-form-item label="公司名称" prop="companyName">
                      <el-input v-model="basicForm.companyName" :disabled='isForbiddenInput' placeholder="请输入公司名称"></el-input>
                    </el-form-item>
                    <el-form-item label="所在部门" prop="department">
                      <el-input v-model="basicForm.department" :disabled='isForbiddenInput' placeholder="请输入部门"></el-input>
                    </el-form-item>
                    <el-form-item label="职位" prop="position">
                      <el-input v-model="basicForm.position" :disabled='isForbiddenInput' placeholder="请输入职位"></el-input>
                    </el-form-item>
                    <el-form-item label="工作状态" prop="state">
                      <el-select
                        v-model="basicForm.state"
                        placeholder="请选择状态"
                        :disabled='isForbiddenInput'
                      >
                        <el-option label="在职" value="zaizhi"></el-option>
                        <el-option label="离职" value="lizhi"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
              </el-tab-pane>
              <el-tab-pane name="compact" label="合同信息">
                <datatop :activeName="activeZhName" v-if="activeZhName" />
                <div class="allForm">
                  <el-form
                    :model="compactForm"
                    :rules="compactRules"
                    ref="compactForm"
                    label-width="100px"
                    class="demo-Form"
                    hide-required-asterisk
                  >
                    <el-form-item label="入职时间" prop="entryTime">
                      <el-date-picker
                        v-model="compactForm.entryTime"
                        type="date"
                        :disabled='isForbiddenInput'
                        placeholder="选择日期">
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="司龄" prop="compactTime">
                      <el-input v-model="compactForm.compactTime" :disabled='isForbiddenInput' placeholder="请输入司龄"></el-input>
                    </el-form-item>
                    <el-form-item label="工作地点" prop="workplace">
                      <el-input v-model="compactForm.workplace" :disabled='isForbiddenInput' placeholder="请输入工作地点"></el-input>
                    </el-form-item>
                    <el-form-item label="合同开始时间" prop="contractStartTime">
                      <el-date-picker
                        v-model="compactForm.contractStartTime"
                        type="date"
                        :disabled='isForbiddenInput'
                        placeholder="选择日期">
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="合同结束时间" prop="contractEndTime">
                      <el-date-picker
                        v-model="compactForm.contractEndTime"
                        type="date"
                        :disabled='isForbiddenInput'
                        placeholder="选择日期">
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="合同期限" prop="contractDeadline">
                      <el-input v-model="compactForm.contractDeadline" :disabled='isForbiddenInput' placeholder="请输入合同期限"></el-input>
                    </el-form-item>
                    <el-form-item label="合同类型" prop="contractType">
                      <el-select
                        v-model="compactForm.contractType"
                        :disabled='isForbiddenInput'
                        placeholder="请选择类型"
                      >
                        <el-option label="全" value="zaizhi"></el-option>
                        <el-option label="半" value="lizhi"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="合同次数" prop="contractNumber">
                      <el-input v-model="compactForm.contractNumber" :disabled='isForbiddenInput' placeholder="请输入合同次数"></el-input>
                    </el-form-item>
                    <el-form-item label="用工形式" prop="modality">
                      <el-select
                        v-model="compactForm.modality"
                        :disabled='isForbiddenInput'
                        placeholder="请选择形式"
                      >
                        <el-option label="全职" value="zaizhi"></el-option>
                        <el-option label="兼职" value="lizhi"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
              </el-tab-pane>
              <el-tab-pane name="personage" label="个人信息">
                <datatop :activeName="activeZhName" v-if="activeZhName" />
                <div class="allForm">
                  <el-form
                    :model="personageForm"
                    :rules="personageRules"
                    ref="personageForm"
                    label-width="100px"
                    class="demo-Form"
                    hide-required-asterisk
                  >
                    <el-form-item label="身份证号" prop="card">
                      <el-input v-model="personageForm.card" :disabled='isForbiddenInput' placeholder="请输入身份证号"></el-input>
                    </el-form-item>
                    <el-form-item label="出生日期" prop="birthTime">
                      <el-date-picker
                        v-model="personageForm.birthTime"
                        type="date"
                        :disabled='isForbiddenInput'
                        placeholder="选择日期">
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="年龄" prop="age">
                      <el-input v-model="personageForm.age" :disabled='isForbiddenInput' placeholder="请输入年龄"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex" >
                      <el-select
                        v-model="personageForm.sex"
                        :disabled='isForbiddenInput'
                        placeholder="请选择性别"
                      >
                        <el-option label="男" value="nan"></el-option>
                        <el-option label="女" value="nv"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="民族" prop="nation">
                      <el-input v-model="personageForm.nation" :disabled='isForbiddenInput' placeholder="请输入民族"></el-input>
                    </el-form-item>
                    <el-form-item label="籍贯" prop="nativePlace">
                      <el-input v-model="personageForm.nativePlace" :disabled='isForbiddenInput' placeholder="请输入籍贯"></el-input>
                    </el-form-item>
                    <el-form-item label="通讯地址" prop="contactAddress">
                      <el-input v-model="personageForm.contactAddress" :disabled='isForbiddenInput' placeholder="请输入通讯地址"></el-input>
                    </el-form-item>
                  </el-form>
                </div>
              </el-tab-pane>
              <el-tab-pane name="emergencyContact" label="紧急联系人">
                <datatop :activeName="activeZhName" v-if="activeZhName" />
                <div class="allForm">
                  <el-form
                    :model="instancyForm"
                    :rules="instancyRules"
                    ref="instancyForm"
                    label-width="100px"
                    class="demo-Form"
                    hide-required-asterisk
                  >
                    <el-form-item label="紧急联系人" prop="instancyName">
                      <el-input v-model="instancyForm.instancyName" :disabled='isForbiddenInput' placeholder="请输入紧急联系人"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="instancyPhone">
                      <el-input v-model="instancyForm.instancyPhone" :disabled='isForbiddenInput' placeholder="请输入联系人电话"></el-input>
                    </el-form-item>
                  </el-form>
                </div>
              </el-tab-pane>
              <el-tab-pane name="education" label="教育信息">
                <datatop :activeName="activeZhName" v-if="activeZhName" />
                <div class="allForm">
                  <el-form
                    :model="educationForm"
                    :rules="educationRules"
                    ref="educationForm"
                    label-width="100px"
                    class="demo-Form"
                    hide-required-asterisk
                  >
                    <el-form-item label="学历" prop="credential">
                      <el-select v-model="educationForm.credential" :disabled='isForbiddenInput' placeholder="请选择学历">
                        <el-option
                          v-for="item in credentialList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="专业" prop="domain">
                      <el-input v-model="educationForm.domain" :disabled='isForbiddenInput' placeholder="请输入专业"></el-input>
                    </el-form-item>
                    <el-form-item label="毕业院校" prop="school">
                      <el-input v-model="educationForm.school" :disabled='isForbiddenInput' placeholder="请输入毕业院校"></el-input>
                    </el-form-item>
                  </el-form>
                </div>
              </el-tab-pane>
              <el-tab-pane name="accountNumber" label="账号信息">
                <datatop :activeName="activeZhName" v-if="activeZhName" />
                <div class="allForm">
                  <el-form
                    :model="accountForm"
                    :rules="accountRules"
                    ref="accountForm"
                    label-width="100px"
                    class="demo-Form"
                    hide-required-asterisk
                  >
                    <el-form-item label="银行卡号" prop="cardNumber">
                      <el-input v-model="accountForm.cardNumber" :disabled='isForbiddenInput' placeholder="请输入银行卡号"></el-input>
                    </el-form-item>
                    <el-form-item label="社保号" prop="socialSecurity">
                      <el-input v-model="accountForm.socialSecurity" :disabled='isForbiddenInput' placeholder="请输入社保号"></el-input>
                    </el-form-item>
                  </el-form>
                </div>
              </el-tab-pane>
              <el-tab-pane name="dimission" label="离职信息">
                <datatop :activeName="activeZhName" v-if="activeZhName" />
                <div class="allForm">
                  <el-form
                    :model="dimissionForm"
                    :rules="dimissionRules"
                    ref="dimissionForm"
                    label-width="100px"
                    class="demo-Form"
                    hide-required-asterisk
                  >
                    <el-form-item label="离职日期" prop="dimissionTime">
                      <el-date-picker
                      v-model="dimissionForm.dimissionTime"
                      type="date"
                      :disabled='isForbiddenInput'
                      placeholder="选择日期">
                    </el-date-picker>
                    </el-form-item>
                    <el-form-item label="离职原因" prop="dimissionReason">
                      <el-select v-model="dimissionForm.dimissionReason" :disabled='isForbiddenInput' placeholder="请选择离职原因">
                        <el-option
                          v-for="item in dimissionReasonList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
              </el-tab-pane>
            </el-tabs>
            <ul class="line">
              <div v-for="index of 7" :key="index">
                <li :class="activeLength == index - 1 ? 'active' : ''"></li>
                <div class="line-div"></div>
              </div>
            </ul>
          </ul>
          <div class="infomation-button">
            <div v-if="!isForbiddenInput">
              <el-button type="primary" class="red-b" @click="submitForm(
              'basicForm',
              'compactForm',
              'personageForm',
              'instancyForm',
              'educationForm',
              'accountForm',
              'dimissionForm')">确定</el-button>
              <el-button @click="$router.go(-1)">取消</el-button>
            </div>
            <div v-else>
              <el-button >查看员工签署档案</el-button>
              <el-button >打印</el-button>
            </div>
          </div>
          <setdimission v-if="dialogVisible" :dialogVisible="dialogVisible" :changePopping='changePopping' :isForbiddenInput='isForbiddenInput' pageText='办理离职'/>
        </div>
      </el-col>
    </el-row>
  </div>
  </div>
</template>

<script>
import datatop from './components/dataTop.vue'
import setdimission from './components/setdimission.vue'
export default {
  components:{datatop,setdimission},
  data() {
    return {
      activeName: "basic", //选择tabs
      activeLength:0,
      activeZhName:'基本信息',//初始化标题
      dialogVisible:false,//设置离职弹窗
      isForbiddenInput:false,//是否禁用input
      basicForm:{
        name: '',//名字
        phone: '',//手机号码
        mailbox:'',//邮箱
        companyName:'',//公司名称
        department:'',//部门
        position:'',//职位
        state:'',//工作状态
      },//基本信息表单
      basicRules:{
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        mailbox: [
          { required: true, message: '请输入邮箱', trigger: 'blur' }
        ],
        companyName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' }
        ],
        department: [
          { required: true, message: '请输入部门', trigger: 'blur' }
        ],
        position: [
          { required: true, message: '请输入职位', trigger: 'blur' }
        ],
        state: [
          { required: true, message: '请选择工作状态', trigger: 'change' }
        ],
      },//基本信息表单验证
      compactForm:{
        entryTime: '',//入职时间
        compactTime: '',//司龄
        workplace:'',//工作地点
        contractStartTime:'',//开始时间
        contractEndTime:'',//结束时间
        contractDeadline:'',//合同期限
        contractType:'',//合同类型
        contractNumber:'',//合同次数
        modality:'',//用工形式
      },//合同信息表单
      compactRules:{
        entryTime: [
          { required: true, message: '请选择时间', trigger: 'change' },
        ],
        compactTime: [
          { required: true, message: '请输入司龄', trigger: 'blur' },
        ],
        workplace: [
          { required: true, message: '请输入工作地点', trigger: 'blur' }
        ],
        contractStartTime: [
          { required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        contractEndTime: [
          { required: true, message: '请选择结束时间', trigger: 'change' }
        ],
        contractDeadline: [
          { required: true, message: '请输入合同期限', trigger: 'blur' }
        ],
        contractType: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ],
        contractNumber: [
          { required: true, message: '请输入合同次数', trigger: 'blur' }
        ],
        modality: [
          { required: true, message: '请选择形式', trigger: 'change' }
        ],
      },//合同信息表单验证
      personageForm:{
        card: '',//身份证号
        birthTime: '',//出生日期
        age:'',//年龄
        sex:'',//性别
        nation:'',//民族
        nativePlace:'',//籍贯
        contactAddress:'',//通讯地址
      },//个人信息表单
      personageRules:{
        card: [{ required: true, message: '请输入身份证号', trigger: 'blur' },],
        birthTime: [
          { required: true, message: '请选择出生日期', trigger: 'change' },
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        nation: [
          { required: true, message: '请输入民族', trigger: 'blur' }
        ],
        nativePlace: [
          { required: true, message: '请输入籍贯', trigger: 'blur' }
        ],
        contactAddress: [
          { required: true, message: '请输入通讯地址', trigger: 'blur' }
        ]
      },//个人信息表单验证
      instancyForm:{
        instancyName:'',//紧急联系人
        instancyPhone:'',//紧急联系人电话
      },//紧急联系人表单
      instancyRules:{
        instancyName: [{ required: true, message: '请输入紧急联系人', trigger: 'blur' },],
        instancyPhone: [{ required: true, message: '请输入电话', trigger: 'blur' },]
      },//紧急联系人表单验证
      credentialList:[
        {value:'1',label:'本科'},
        {value:'2',label:'大专'},
        {value:'3',label:'高中'},
        {value:'4',label:'中专'},
        {value:'5',label:'初中'},
        {value:'6',label:'其他'},
      ],//学历列表
      educationForm:{
        credential:'',//学历
        domain:'',//专业
        school:'',//毕业院校
      },//教育信息
      educationRules:{
        credential: [{ required: true, message: '请选择学历', trigger: 'change' }],
        domain: [{ required: true, message: '请输入专业', trigger: 'blur' },],
        school: [{ required: true, message: '请输入毕业院校', trigger: 'blur' },]
      },//教育信息表单验证
      accountForm:{
        cardNumber:'',//银行卡号
        socialSecurity:'',//社保号
      },//账户表单
      accountRules:{
        cardNumber: [{ required: true, message: '请输入银行卡号', trigger: 'blur' },],
        socialSecurity: [{ required: true, message: '请输入社保号', trigger: 'blur' },],
      },//账户信息表单验证
      dimissionForm:{
        dimissionTime:'',//离职日期
        dimissionReason:'',//离职原因
      },//离职表单
      dimissionRules:{
        dimissionTime: [{ required: true, message: '请选择日期', trigger: 'change' },],
        dimissionReason: [{ required: true, message: '请选择原因', trigger: 'change' },],
      },//离职表单验证
      dimissionReasonList:[
        {value:'1',label:'外部原因'},
        {value:'2',label:'个人原因'},
        {value:'3',label:'其他'},
      ],//离职原因列表
    };
  },
  mounted(){

  },
  methods: {
    //提交表单
    async  submitForm(basicForm,compactForm,personageForm,instancyForm,educationForm,accountForm,dimissionForm){
      try {
        await Promise.all([
          this.$refs[basicForm].validate(),
          this.$refs[compactForm].validate(),
          this.$refs[personageForm].validate(),
          this.$refs[instancyForm].validate(),
          this.$refs[educationForm].validate(),
          this.$refs[accountForm].validate(),
          this.$refs[dimissionForm].validate(),
        ]).then(res =>{
          console.log(res,'成功的回调')
        });
        } catch (error) {
          return;
      }
    },
    //点击tabs
    handleClick(tab, event) {
      this.activeLength = tab.index
      this.activeZhName = tab.label
    },
    //改变设置离职弹窗状态
    changePopping(val,isShow){
      this.dialogVisible = val
      this.isForbiddenInput = isShow
    },
  },
};
</script>

<style>
</style>